import React, { useState } from 'react';
import { Table, Tag, Space, Modal, Button, PageHeader, Statistic, Row, Descriptions } from 'antd';
import {
  QueryFilter,
  ProFormText,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-form';
import { tasks } from '../mock/tasks';

import './index.less'

const colorMap = {
  'Processing': 'geekblue',
  'Waiting': 'green',
  'Closed': 'volcano'
}

export default (props: any) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState<any>();

  const showModal = (record: any) => {
    setIsModalVisible(true);
    setCurrentRecord(record);
  };

  const columns = [
    {
      title: 'TaskID',
      dataIndex: 'taskID',
      key: 'taskID',
      render: (text: any) => <a>{text}</a>,
    },
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '创建人',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
      key: 'createAt',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (status: string) => {
        return (
          <Tag color={colorMap[status]} key={status}>
            {status.toUpperCase()}
          </Tag>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Space size="middle">
          <a onClick={() => showModal(record)}>查看详情</a>
          <a>加入任务</a>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div>
        <QueryFilter<{
          name: string;
          company: string;
        }>
          onFinish={async (values: any) => {
            console.log(values.name);
          }}
        >
          <ProFormText name="taskID" label="TaskID" />
          <ProFormText name="name" label="任务名称" rules={[{ required: true }]} />
          <ProFormText name="creater" label="创建人" />
          <ProFormSelect
            name="algorithm"
            label="聚合算法"
            showSearch
            valueEnum={{
              1: 'VB-FedAVG',
              2: 'VSB-FedAVG',
              3: 'FedAVG',
            }}
          />
          <ProFormText name="SCaddress" label="合约地址" />
          <ProFormText name="peerIP" label="服务端IP" />
          <ProFormDateRangePicker name="create" label="创建时间" colSize={2} />
        </QueryFilter>
      </div>

      <div>
        <Table columns={columns} dataSource={tasks} />
      </div>

      <Modal
        closable={false}
        visible={isModalVisible}
        footer={null}
        width={1280}
      >
        <PageHeader
          onBack={() => setIsModalVisible(false)}
          title={currentRecord?.name}
          tags={<Tag color={colorMap[currentRecord?.status]}>{currentRecord?.status}</Tag>}
          subTitle="详情页"
          extra={[
            <Button key="2" onClick={() => setIsModalVisible(false)}>取消</Button>,
            <Button key="1" type="primary">
              加入任务
            </Button>,
          ]}
        >
          {/* <Row>
            <Statistic
              title="Gas Cost"
              prefix="Ether"
              value={0.0008}
              style={{
                margin: '0 32px',
              }}
            />
            <Statistic title="Balance" prefix="$" value={3345.08} />
          </Row> */}

          <Descriptions layout="vertical" bordered>
            <Descriptions.Item label="taskID">{currentRecord?.taskID}</Descriptions.Item>
            <Descriptions.Item label="迭代次数">{currentRecord?.iterations}</Descriptions.Item>
            <Descriptions.Item label="每轮选择节点数">{currentRecord?.numEachRound}</Descriptions.Item>
            <Descriptions.Item label="使用算法">{currentRecord?.algorithm}</Descriptions.Item>
            <Descriptions.Item label="服务端节点">
              {currentRecord?.server}
            </Descriptions.Item>
            <Descriptions.Item label="智能合约地址">
              {currentRecord?.SCaddress}
            </Descriptions.Item>
            <Descriptions.Item label="节点数">
              {currentRecord?.num}
            </Descriptions.Item>
            <Descriptions.Item label="参与节点" span={2}>
              {currentRecord?.clients.join("; ")}
            </Descriptions.Item>
            <Descriptions.Item label="创建人">{currentRecord?.username}</Descriptions.Item>
            <Descriptions.Item label="创建时间" span={2}>
              {currentRecord?.createAt}
            </Descriptions.Item>
            <Descriptions.Item label="描述信息">
              <div style={{ maxWidth: "1080px" }} dangerouslySetInnerHTML={{ __html: currentRecord?.description }} />
            </Descriptions.Item>
          </Descriptions>
        </PageHeader>
      </Modal>
    </div>
  )
}